<template>
  <div class="position">
    <frame1 width="535px" height="417px" slotContentHeight="370px">
      <div slot="title">待退款信息</div>
      <i slot="btn" class="el-icon-close" @click="close"></i>
      <div slot="content" class="content">
        <screen>
          <input type="text"  v-model="content"/>
          <el-button>查询</el-button>
        </screen>
          <roll height="253px">
          <div class="height">
                <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="序号" width="107"></el-table-column>
                <el-table-column prop="date" label="创建时间"></el-table-column>
                <el-table-column prop="code" label="日志内容"></el-table-column>
                </el-table>
            </div>
          </roll>
          <div class="block">
               <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,  prev, pager, next, jumper"
                :total="20">
            </el-pagination>
          </div>
                 
          
      </div>
    </frame1>
  </div>
</template>
<script>
import screen from "@/components/screen";
import roll from "@/components/Roll";
import frame1 from "@/components/frame";


export default {
  components: {
    screen,
    frame1,
    roll
  },
  data() {
    return {
        content:"",
           currentPage:1, //当前第几页
        pageSize:10,
      tableData: [
        {
          date: "2016-05-02",
          code: "发起退款"
        },
        {
          date: "2016-05-04",
          code: "发退款成功"
        },
        {
          date: "2016-05-01",
          code: "退款失败"
        }
      ]
    };
  },
  methods: {
    close() {
        this.$emit("closeOrder")
    },
    handleCurrentChange(){}
  }
};
</script>
<style scoped>
.position {
  z-index: 9;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%);
}
.el-button {
  background: #1d938d;
  color: #fff;
  padding: 8px 20px;
  vertical-align: middle;

  margin-left: 30px;
}
input {
  height: 30px;
  background: none;
  outline-color: none;
  border: none;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  margin-left: 30px;
}
.content {
  height: 371px;
  background-color: #001614;
}
.height {
    height: 253px;
}
/deep/ .el-table th {
    padding: 0;
    height: 30px;
}
.block {
    text-align: center;
}
</style>